<template>
  <div class="release-box">
    <textarea ref="release" />
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
const Simditor = window.Simditor
const BASE_API = process.env.VUE_APP_BASE_API
export default {
  props: {
    toolbar: {
      type: Array,
      default() {
        return [
          'title',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'fontScale',
          'color',
          '|',
          'ol',
          'ul',
          'blockquote',
          'code',
          'table',
          '|',
          'link',
          'image',
          'hr',
          '|',
          'indent',
          'outdent',
          'alignment'
        ]
      }
    },
    uploadSetting: {
      type: Object,
      default() {
        return {
          url: `${BASE_API}/upload`, // 文件上传的接口地址
          params: { filesName: 'article', token: getToken() }, // 键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
          fileKey: 'imgPath', // 服务器端获取文件数据的参数名
          connectionCount: 3,
          leaveConfirm: '正在上传文件'
        }
      }
    }
  },
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.createSimditor()
  },
  methods: {
    createSimditor() {
      this.editor = new Simditor({
        textarea: this.$refs.release,
        toolbar: this.toolbar,
        pasteImage: true,
        upload: this.uploadSetting
      })
      this.editor.on('valuechanged', _ => {
        this.$emit('data', this.editor.getValue())
      })
    }
  }
}
</script>

<style lang="scss">
.release-box {
  .simditor-toolbar {
    top: 55px !important;
  }
  img {
    max-width: 100% !important;
    height: initial !important;
  }
}
</style>

